<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchData" class="ele-form-search">
      <el-form-item>
        <el-select v-model="searchData.plant_id" placeholder="种植信息" filterable clearable style="width:300px">
          <el-option
            v-for="(item,index) in plants"
            :key="index"
            :label="getCropName(item)"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchData.gdate"
          type="daterange"
          range-separator=" ~ "
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button class="ele-btn-icon" icon="el-icon-search" type="primary" @click="search">查询</el-button>
        <el-button type="default" @click="reset('searchForm')">重置</el-button>
        <el-button type="success" @click="showReComputed('searchForm')">重新计算</el-button>
        <!-- <el-button type="success" icon="el-icon-download" style="float:right;">导出数据</el-button> -->
      </el-form-item>
    </el-form>
    <el-dialog
      v-loading="loading"
      title="重新计算"
      :visible.sync="dialogVisible"
      width="540px"
      @close="result = false"
    >
      <el-form :model="computedData" class="demo-form-inline" label-width="100px">
        <el-form-item label="种植信息">
          <el-select v-model="computedData.plant_id" placeholder="请选择种植信息" filterable clearable style="width:240px">
            <el-option
              v-for="(item,index) in plants"
              :key="index"
              :label="getCropName(item)"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="computedData.daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
      <el-result v-if="result" icon="success" title="操作成功" sub-title="数据已重新处理完毕">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="result = false">返回</el-button>
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { cropDaily } from '@/api/remote'
import { convertArr2Obj } from '@/utils'
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      result: false,
      computedData: {
        plant_id: '',
        daterange: []
      },
      searchData: {
        plant_id: '',
        gdate: []
      }
    }
  },
  computed: {
    ...mapGetters(['project', 'fields']),
    fieldsFilter() {
      const res = this.fields.filter((val) => {
        return +this.project.id === +val.project_id
      })
      return res
    },
    plants() {
      let arr = []
      this.fieldsFilter.forEach((item, index) => {
        item.plants.map((val) => {
          val.field = item.name
        })
        arr = arr.concat(item.plants)
      })
      return arr
    },
    plantsObj() {
      return convertArr2Obj(this.plants, 'id')
    }
  },
  watch: {
    plants: {
      handler(newVal) {
        if (newVal) {
          if (!this.searchData.plant_id) {
            this.searchData.plant_id = newVal.slice(-1)[0]['id'] || ''
            this.search()
          }
          if (!this.computedData.plant_id) {
            this.computedData.plant_id = newVal.slice(-1)[0]['id'] || ''
          }
        }
      },
      immediate: true,
      deep: true
    },
    'computedData.plant_id': {
      handler(newVal) {
        this.computedData.field_id = this.plantsObj[newVal].field_id
      },
      immediate: true
    }
  },
  methods: {
    getCropName(item) {
      const name = item.stubble > 1 ? `${item.crop.name}第${item.stubble}茬` : item.crop.name
      return item.field + ' - ' + item.plant_year + ' - ' + name
    },
    search() {
      this.$emit('search', this.searchData)
    },
    reset() {
      this.$emit('reset')
    },
    showReComputed() {
      this.dialogVisible = true
    },
    onSubmit() {
      if (!this.computedData.daterange || this.computedData.daterange.length < 2) {
        this.$message.error('请选择正确的日期范围')
        return false
      }
      this.loading = true
      const params = {
        from: this.computedData.daterange[0],
        to: this.computedData.daterange[1],
        field_id: this.computedData.field_id || this.fieldsFilter[0].id
      }
      cropDaily(params).then((res) => {
        this.$message.success(res.msg)
        this.loading = false
        this.result = true
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
